<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>站内信</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
          body{background:#FFF;}
          .mailList{

          }
          .mailList li{
            padding-top:0.55rem;
          }
          .mailList li>img{
            float:left;
            width:1rem;
            height:1rem;
            border-radius:50%;
          }
          .mailList li>.info{
            float:left;
            width:calc(100% - 1rem - 0.3rem);
            margin-left:0.3rem;
            border-bottom:1px solid #F9F9F9;
            padding-bottom:0.55rem;
          }
          .mailList li>.info .h3{

          }
          .mailList li>.info .h3 h3{
            color:#141414;
            font-weight:normal;
            font-size:0.32rem;
          }
          .mailList li>.info .h3 h3 i{
              display: inline-block;
              width:0.1rem;
              height:0.1rem;
              background:#F30;
              border-radius:50%;
              margin-left:0.15rem;
              vertical-align: middle;
          }
          .mailList li>.info .h3 span{
            color:#A9A9A9;
            font-size:0.28rem;
            font-weight:lighter;
          }
          .mailList li>.info ._c{
            color:#7F7F7F;
            font-size:0.30rem;
            font-weight:lighter;
            margin-top:0.25rem;

          }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div id="container">
            <template v-if="list!=null">
                <template v-if="list.length>0">
                    <ul class="mailList">
                        <li class="clearfix" v-for="item,index in list" @click="lookDetail(index)">
                            <img :src="item.type!=1?'../../../image/my/mailIconOther.png':'../../../image/my/mailIconMoney.png'" />
                            <div class="info">
                                <div class="h3 disbox">
                                    <h3 class="disflex ell">{{item.title}}<i v-if="item.status!=2"></i></h3>
                                    <span>{{utils.tsToDateFormat(item.time_created,'MM-dd hh:mm')}}</span>
                                </div>
                                <div class="ell _c">{{item.msg}}</div>
                            </div>
                        </li>
                    </ul>
                    <div class="loadText">
                        <div class="weui-loadmore" v-if="hasMore">
                            <i class="weui-loading"></i>
                            <span class="weui-loadmore__tips">正在加载</span>
                        </div>
                        <span v-else class="over">我已经到底啦！</span>
                    </div>
                </template>
                <template v-else>
                    <div class="loadFull whiteBg">
                        <section class="m-no">
                            <div class="u-img"></div>
                            <div class="u-spec">暂时没有收到站内信</div>
                        </section>
                    </div>
                </template>
            </template>
            <template v-else>
                <div class="loadFull whiteBg">
                    <div class="se-loading"></div>
                </div>
            </template>
        </div>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var app = new Vue({
                el:'#app',
                data:{
					iosTest:false,
                    list: null,
                    hasMore: true,
                    page: 1,
                },
                methods:{
					getData(){
						var _this = this;
						$.ajax({
						    url: '/user/get/msg?page='+ _this.page,
						    method: 'get',
						    success: function(res){
						        var list = res.data.result;
								//console.log(JSON.stringify(list));
                                //alert(utils.tsToDateFormat(list[0].time_created,'MM-dd hh:mm'))
						        var hasMore = list.length >= res.data.pagesize;
						        if(_this.page == 1){
						            _this.list = list;
						        }else{
						            _this.list = _this.list.concat(list);
						        }
						        _this.page += 1;
						        _this.hasMore = hasMore;
						    },
						    error: function(err){
						        if(_this.page == 1 && err.code == 404){
						            _this.list = [];
						            return false;
						        }
						        $.toast(err.message);
						    }
						});
					},
                    lookDetail(index){
                        var _this = this;
                        $.ajax({
						    url: '/user/get/msg',
                            data:{
                                id:_this.list[index].id
                            },
						    method: 'post',
						    success: function(res){
						        _this.list[index].status = 2;
						    }
						});
                        $.openUrl('common/commonTitle','my/mailDetail',{title:_this.list[index].title,content:_this.list[index].msg});
                    }
                },
                mounted(){
					$.initJs(this);
					this.getData();
                }
            });


            $.pullDown({
				success:function(){
					app.hasMore = true;
					app.page = 1;
                    app.getData();
				}
			});

			//上拉加载
			api.addEventListener({
			    name:'scrolltobottom',
			    extra:{threshold:10}
			}, function(ret, err){
			    app.getData();
			});
        }
    </script>
</body>
</html>
